<template>
  <div>
    <div class="top">
      <div class="back_top" align="center">
        <!-- <img :src="require('../assets/images')" alt=""> -->
        <h2 :style="{ 'float': 'left', 'margin-left': '10px' }">{{ realTime }}</h2>
        <h2> <strong>红星湖数据监管平台</strong> </h2>
      </div>
      <el-image :src="src" :style="{
        'position': 'relative', 'top': '-1.1vh', 'cursor': 'pointer', 'width': '30%',
        'padding-right': '3%', 'height': '77px'
      }" @click.native="handleOpenBi"></el-image>
    </div>
    <div style="margin: 0 20px" class="titbiaot">
      <p style="padding:0 10px;margin: 0;">
        <svg-icon style="color:#0165c3;width:24px;height:24px;margin-right:5px;" class-name="iconClass"
          icon-class="gongchang" />
        <strong style="position: relative;bottom: 3px;font-size: 15px;">厂区设备</strong>
      </p>
    </div>
    <div class="Outside">
      <el-row>
        <el-col :span="12" class="animate__animated animate__fadeInLeftBig">
          <div class="home" style="margin-right:10px">
            <el-row>
              <el-col :span="12" style="text-align:center">
                <div class="left_bz" align="center">
                  <el-image :src="CenterLeft" style="width:100%;height:80%;"></el-image><br>
                  <strong>泵站</strong>
                </div>

              </el-col>
              <el-col :span="12">
                <div class="u_right">
                  <div align="center" class="u_title">进水指标</div>
                  <ul class="u_ulli">
                    <li v-for="(v, i) in inletLatelyList" :key="i">{{ v.indicators || '-' }}
                      <div class="u_text"><span>{{ v.data || 0.00 }}</span>{{ v.unit || 'mg/L' }}</div>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="17">
                <div class="bt_tit">
                  <span><strong style="font-size:16px">进水指标记录</strong></span>
                  <el-button style="float: right; padding: 3px 0" type="text"
                    @click="routerNext('入水指标', '/record/enter')">
                    查看更多>></el-button>
                </div>
                <el-table v-loading="loadingEnter" :data="noticeListEnter" :header-cell-style="{
                  background: '#EDF6FF', color: '#0086FF'
                }" :cell-style="cellStyle">
                  <!-- <el-table-column label="序号" align="center" prop="order" width="50" /> -->
                  <el-table-column label="指标" align="center" prop="indicators" min-width="90" show-overflow-tooltip />
                  <el-table-column label="状态" align="center" min-width="60">
                    <template slot-scope="scope">
                      <dict-tag :options="statusOutenter" :value="scope.row.status" />
                    </template>
                  </el-table-column>
                  <el-table-column label="数据" align="center" prop="data" min-width="80" show-overflow-tooltip />
                  <el-table-column label="参考值" align="center" prop="referenceVal" min-width="80"
                    show-overflow-tooltip />
                  <el-table-column label="单位" align="center" prop="unit" min-width="70" show-overflow-tooltip />
                  <el-table-column label="上传时间" align="center" prop="createTime" min-width="130"
                    show-overflow-tooltip />
                </el-table>
              </el-col>
              <el-col :span="7">
                <div class="right_zb">
                  <div class="zb_text" style="text-align:center">
                    <span><strong>进水指标异常</strong></span>
                  </div>
                  <div align="center" class="indexyichang">
                    <div v-for="(v, i) in inletAbnormalCount" :key="i" style="color:#FF9600;font-size: 14px;">{{
                      v.indicators || '-'
                    }}: <span style="font-width:900;font-size: 16px;"
                        :class="v.count === 0 ? 'cStyle' : 'rStyle'"><strong>{{ v.count || 0 }}</strong></span> 次
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12" class="animate__animated animate__fadeInRightBig">
          <div class="home" style="margin-left:10px">
            <el-row>
              <el-col :span="12" style="text-align:center">
                <div class="left_bz" style="background-color:#E9F3FB" align="center">
                  <el-image :src="CenterRight" style="width:100%;height:80%;"></el-image><br>
                  <strong>移动超磁水体净化站</strong>
                </div>

              </el-col>
              <el-col :span="12">
                <div class="u_right" style="background-color:#00D0FF">
                  <div align="center" class="u_title">出水指标</div>
                  <ul class="u_ulli">
                    <li v-for="(v, i) in effluentLatelyList" :key="i" style="color:#3447D4">{{ v.indicators || '-' }}
                      <div class="u_text"><span>{{ v.data || 0.00 }}</span>{{ v.unit || 'mg/L' }}</div>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="17">
                <div class="bt_tit">
                  <span><strong style="font-size:16px;color: #00D0FF;">出水指标记录</strong></span>
                  <el-button style="float: right; padding: 3px 0" type="text"
                    @click="routerNext('出水指标', '/record/comeout')">
                    查看更多>></el-button>
                </div>
                <el-table v-loading="loadingOut" :data="noticeListOut" :header-cell-style="{
                  background: '#E8FBFF', color: '#00D0FF'
                }" :cell-style="cellStyleAC">
                  <!-- <el-table-column label="序号" align="center" prop="order" width="50" /> -->
                  <el-table-column label="指标" align="center" prop="indicators" min-width="90" show-overflow-tooltip />
                  <el-table-column label="状态" align="center" min-width="60">
                    <template slot-scope="scope">
                      <dict-tag :options="statusOutenter" :value="scope.row.status" />
                    </template>
                  </el-table-column>
                  <el-table-column label="数据" align="center" prop="data" min-width="80" show-overflow-tooltip />
                  <el-table-column label="参考值" align="center" prop="referenceVal" min-width="80"
                    show-overflow-tooltip />
                  <el-table-column label="单位" align="center" prop="unit" min-width="70" show-overflow-tooltip />
                  <el-table-column label="上传时间" align="center" prop="createTime" min-width="130"
                    show-overflow-tooltip />
                </el-table>
              </el-col>
              <el-col :span="7">
                <div class="right_zb">
                  <div class="zb_text" style="text-align:center">
                    <span><strong>出水指标异常</strong></span>
                  </div>
                  <div align="center" class="indexyichang">
                    <div v-for="(v, i) in effluentAbnormalCount" :key="i" style="color:#FF9600;font-size: 14px;">{{
                      v.indicators || '-'
                    }}: <span style="font-width:900;font-size: 16px;"
                        :class="v.count === 0 ? 'cStyle' : 'rStyle'"><strong>{{
                          v.count || 0
                        }}</strong></span> 次
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- <el-divider class="shuxian" direction="vertical"></el-divider> -->

          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin: 0 20px" class="titbiaot">
      <p style="padding:0 10px;margin: 0;">
        <svg-icon style="color:#0165c3;width:24px;height:24px;margin-right:5px;" class-name="iconClass"
          icon-class="humian" />
        <strong style="position: relative;bottom: 3px;font-size: 15px;">厂区设备</strong>
      </p>
    </div>
    <el-row>
      <div class="home" style="width:72%;float: left;">
        <el-col :span="24">
          <el-row class="animate__animated animate__bounceInDown" :gutter="20">
            <el-col :span="8">
              <div class="box-card_01">
                <el-row style="display: flex;align-items: center;">
                  <el-col :span="7">
                    <div class="card_xd_lt" align="center">
                      <strong><span style="font-size:24px">{{ homeData.totalNumber || '0' }}</span> 台</strong>
                      <div class="lt_di"><strong>微生物投加设备</strong></div>
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="card_cent">
                      <img :src="require('../assets/images/u46.png')" width="50%" height="60%">
                      <span style="font-size: 18px;font-weight: bold;">设备总台数</span>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="card_xd">
                      <strong><span style="font-size:24px">{{ homeData.totalNumberOne || '0' }}</span> 台</strong>
                      <div class="rg_di"><strong>曝气设备</strong></div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="box-card_01">
                <el-row style="display: flex;align-items: center;">
                  <el-col :span="7">
                    <div class="card_xd_lt" align="center">
                      <strong><span style="font-size:24px">{{ homeData.runningNumber || '0' }}</span> 台</strong>
                      <div class="lt_di"><strong>微生物投加设备</strong></div>
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="card_cent" style="background-color: #00D756;">
                      <img :src="require('../assets/images/u47.png')" width="50%" height="60%">
                      <span style="font-size: 18px;font-weight: bold;">运行设备台数</span>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="card_xd">
                      <strong><span style="font-size:24px">{{ homeData.runningNumberOne || '0' }}</span> 台</strong>
                      <div class="rg_di"><strong>曝气设备</strong></div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="box-card_01">
                <el-row style="display: flex;align-items: center;">
                  <el-col :span="7">
                    <div class="card_xd_lt" align="center">
                      <strong><span style="font-size:24px">{{ homeData.offlineNumber || '0' }}</span> 台</strong>
                      <div class="lt_di"><strong>微生物投加设备</strong></div>
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="card_cent" style="background-color: #EB9500;">
                      <img :src="require('../assets/images/u48.png')" width="50%" height="60%">
                      <span style="font-size: 18px;font-weight: bold;">停运设备台数</span>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="card_xd">
                      <strong><span style="font-size:24px">{{ homeData.offlineNumberOne || '0' }}</span> 台</strong>
                      <div class="rg_di"><strong>曝气设备</strong></div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div ref="myChart" :style="{ width: '100%', height: '300px' }"></div>
            </el-col>
          </el-row>
        </el-col>
      </div>
      <div class="home" style="width:21%;float: left;height: 470px;">
        <el-col :span="24" style="height:100%">
          <div class="doc_title" align="center">
            <img :src="require('../assets/images/u49.png')" style="vertical-align: top;margin-right: 8px;" width="36px"
              height="28px">
            <span class="doc_text">DO检测仪</span>
            <div class="doc_model">{{ monitorDeviceDataList && monitorDeviceDataList.length || 0}}</div>
          </div>
          <div class="doc_list">
            <div :class="v.status > 0 ? 'doc_error' : 'doc_succ'" v-for="(v, i) in monitorDeviceDataList" :key="i">
              <div class="succ_shu"></div>
              <span class="title">
                <i v-if="v.status > 0" class="el-icon-warning" />{{ v.monitorName || '-' }}:
              </span>
              <br>
              <span class="tit_val">{{ v.data || '-' }}</span> <span class="tit_wei">{{ v.unit || 'mg/L' }}</span>
            </div>
          </div>
        </el-col>
      </div>
    </el-row>
    <template v-if="biVisible">
      <bi @clear="handleCloseBi"></bi>
    </template>
  </div>

</template>


<script>
import 'animate.css'
import topleft from '@/assets/images/u35.gif'
import CenterLeft from '@/assets/images/u36.png'
import CenterRight from '@/assets/images/u37.png'

import { formatDate } from '@/utils/index.js'
import { getfactoryList } from "@/api/record/index.js";
import screenfull from 'screenfull'
import * as echarts from 'echarts';
// let ws = new WebSocket('ws://192.168.0.143:9999/ws/websocket');
let ws = new WebSocket('wss://hxh-api.3w-gd.com/websocket');



export default {
  name: "Index",
  data () {
    return {
      src: topleft,
      CenterLeft: CenterLeft,
      CenterRight: CenterRight,
      inletLatelyList: [],//进水
      effluentLatelyList: [],//出水
      effluentAbnormalCount: [],//出水指标异常
      inletAbnormalCount: [],//进水指标异常
      monitorDeviceDataList: [],
      lakeDevice: [],
      electricityBox: [],
      homeData: {
        //设备台数
        offlineNumber: 0,
        runningNumber: 0,
        totalNumber: 0,
        offlineNumberOne: 0,
        runningNumberOne: 0,
        totalNumberOne: 0,
      },
      equipmentNumber: [],
      equipmentLeave: [],
      equipmentTime: [],
      equipmentName: [],
      data: null,
      timer: undefined,
      mySetTime: undefined,
      realTime: formatDate(new Date()),
      loadingEnter: false,
      noticeListEnter: [],
      loadingOut: false,
      noticeListOut: [],
      biVisible: false,
      date: undefined
    };
  },
  components: {
    bi: () => import('@/components/bi/index.vue')
  },
  computed: {
    userID () {//用户ID
      return this.$store.state.user.userObj.userId
    }
  },
  created () {
    this.getTime()
  },
  destroyed () {
    clearInterval(this.timer)
    clearTimeout(this.mySetTime)
    ws.close(1000, this.date + ',PC,' + this.userID);
  },
  mounted () {
    this.getInit()

    ws.addEventListener('close', this.handleWsClose, false)
    ws.addEventListener('open', this.handleWsOpen, false)
    ws.addEventListener('error', this.handleWsError, false)
    ws.addEventListener('message', this.handleWsMessage, false)
  },
  methods: {
    routerNext (name, url) {
      this.$tab.openPage(name, url)
    },
    async getInit () {
      let params = {
        pageNum: 1,
        pageSize: 2,
        dataType: '1',//（0进水 1出水）
        orderByColumn: 'id',
        isAsc: 'desc'//倒叙
      }
      let data = await getfactoryList(params)
      let dataenter = await getfactoryList({ ...params, dataType: '0' })
      this.noticeListOut = data.rows
      this.noticeListEnter = dataenter.rows
    },
    textClick () {
      // ws.send(this.userID)
    },
    handleWsClose (e) {
      console.log('Websocket:close', e);
    },
    handleWsOpen (e) {
      console.log('Websocket:Open', e);
      this.date = new Date().getTime()
      ws.send(this.date + ',PC,' + this.userID)
    },
    handleWsError (e) {
      console.log('Websocket:error', e);
    },
    handleWsMessage (e) {
      console.log('Websocket:message', JSON.parse(e.data));
      let queryArrays = JSON.parse(e.data)
      for (const iterator of queryArrays.lakeDeviceStatus) {
        if (iterator.type === '0') {//微生物
          this.homeData.offlineNumber = iterator.offlineNumber
          this.homeData.runningNumber = iterator.runningNumber
          this.homeData.totalNumber = iterator.totalNumber
        }
        if (iterator.type === '1') {//曝气设备
          this.homeData.offlineNumberOne = iterator.offlineNumber
          this.homeData.runningNumberOne = iterator.runningNumber
          this.homeData.totalNumberOne = iterator.totalNumber
        }
      }
      this.inletLatelyList = queryArrays.inletLatelyList //进水指标
      this.effluentLatelyList = queryArrays.effluentLatelyList//出水指标
      this.inletAbnormalCount = queryArrays.inletAbnormalCount //进水指标异常
      this.effluentAbnormalCount = queryArrays.effluentAbnormalCount//出水指标异常
      this.monitorDeviceDataList = queryArrays.monitorDeviceDataList//DO监测仪

      this.equipmentName = queryArrays.electricityBox.map(v => v.boxName)//设备名称
      this.equipmentNumber = queryArrays.electricityBox.map(v => v.totalNumber)//设备总数量
      this.equipmentLeave = queryArrays.electricityBox.map(v => v.offlineNumber)//设备离线设备
      this.equipmentTime = queryArrays.electricityBox.map(v => v.runningHour)//时长
      this.electricityBox = queryArrays.electricityBox
      this.lakeDevice = queryArrays.lakeDevice


      // this.mySetTime = setTimeout(() => {
      this.showEcharts()
      // }, 800);
    },
    handleCloseBi () {
      document.body.style.overflow = 'auto'
      this.biVisible = false
      if (screenfull.isFullscreen) screenfull.toggle()
    },
    handleOpenBi () {
      // return this.$message.warning('功能待开发')
      if (!screenfull.isFullscreen) {
        screenfull.toggle().then(() => {
          document.body.style.overflow = 'hidden'
          this.biVisible = true
        })
      }
    },
    showEcharts () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['离线设备', '设备台数(台)', '在线时长(H)']
        },
        xAxis: [
          {
            type: 'category',
            data: this.equipmentName,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '设备台数(台)',
            min: 0,
            // max: 5000,
            // interval: 50,
            axisLabel: {
              formatter: '{value} 台'
            }
          },
          {
            type: 'value',
            name: '在线时长(H)',
            min: 0,
            // max: ,
            // interval: 5,
            axisLabel: {
              formatter: '{value} H'
            }
          }
        ],
        series: [
          {
            name: '离线设备',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '台';
              }
            },
            data: this.equipmentLeave,
            itemStyle: {
              color: '#39b54a'
            }
          },
          {
            name: '设备台数(台)',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '台';
              }
            },
            data: this.equipmentNumber,
            itemStyle: {
              color: '#276ace'
            }
          },
          {
            name: '在线时长(H)',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + 'H';
              }
            },
            data: this.equipmentTime,
            itemStyle: {
              color: '#ff9569'
            }
          }
        ]
      };
      option && myChart.setOption(option);
      //根据窗口的大小变动图表 --- 重点
      window.onresize = function () {
        myChart.resize();
        //myChart1.resize();    //若有多个图表变动，可多写

      }
    },
    //设置指定行、列、具体单元格颜色
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (row.status === '0') { //指定坐标rowIndex ：行，columnIndex ：列
        return 'background:#EDF6FF;color:#0086FF' //rgb(105,0,7)
      } else {
        return 'background:#EDF6FF;color:#0086FF' //rgb(105,0,7)
      }
      // if (rowIndex === 1) { //指定坐标rowIndex ：行，columnIndex ：列
      //   return 'background:#0165c3;color:#f7b23a' //rgb(105,0,7)
      // }
    },
    cellStyleAC () {
      return 'background:#E8FBFF;color:#00D0FF'
    },
    getTime () {
      this.timer = setInterval(() => {

        this.realTime = formatDate(new Date())

      }, 1000);
    },

  },
};
</script>

<style scoped lang="scss">
@mixin xd() {
  position: relative;
  width: 100%;
  height: 6em;
  background-color: #131D6D;
  display: flex;
  justify-content: center;
  align-items: center;

  >div {
    height: 1.5em;
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 1.5em;
    width: 100%;
    text-align: center
  }
}

.card_xd {
  @include xd();
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;

  .rg_di {
    border-bottom-right-radius: 16px;
    background-color: #0084FF;

  }
}

.card_xd_lt {
  @include xd();
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;

  .lt_di {
    background-color: #7F0DFF;
    border-bottom-left-radius: 16px;
  }
}

.doc_title {
  width: 100%;
  height: 28px;
  line-height: 28px;
  margin-bottom: 15px;

  .doc_text {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #010101;
  }

  .doc_model {
    display: inline-block;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    background: #8BFF2F;
    border-radius: 10px;
    padding: 4px 11px;
    color: #00B40D;
    margin-left: 8px;
  }

}



.doc_list {
  height: 92%;
  display: flex;
  flex-direction: column;
  // justify-content: space-evenly;
  // justify-content: space-between;
  overflow: scroll;

  .doc_succ {
    width: 100%;
    background: linear-gradient(90deg, #9EFF4F, #fff);
    border-radius: 29px;
    // height: 10vh;
    margin-bottom: 5px;
    padding: 20px 40px;

    .succ_shu {
      float: left;
      height: 64px;
      margin-right: 20px;
      width: 3px;
      background: #5CCE00;
      border-radius: 2px;
    }

    .title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #808080;
    }

    .tit_val {
      font-size: 40px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #00B40D;
    }

    .tit_wei {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }

  .doc_error {
    width: 100%;
    background: linear-gradient(90deg, #FFAA30, #fff);
    border-radius: 29px;
    margin-bottom: 5px;
    padding: 20px 40px;

    .succ_shu {
      float: left;
      height: 64px;
      margin-right: 20px;
      width: 3px;
      background: #d85d11;
      border-radius: 2px;
    }

    .title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #D48200;
    }

    .tit_val {
      font-size: 40px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #E65700;
    }

    .tit_wei {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #E65700;
    }
  }
}

.doc_list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
  height: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
}

.doc_list::-webkit-scrollbar-track {
  background-color: #fff;
}

.doc_list::-webkit-scrollbar-thumb {
  background: #e2e0e0;
  border-radius: 25px;
}

.card_cent {
  width: 100%;
  height: 8em;
  border-radius: 16px;
  background-color: #0165C3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.top {
  width: 100%;
  // background-color: #0165c3;
  height: 63px;
  // overflow-x: hidden;
  color: #fff;
  margin: 20px;

  // line-height: 63px;
  .back_top {
    width: 67%;
    float: left;
    background: url('../assets/images/u34.png') 0px 0px no-repeat;
    background-size: cover;
    margin-right: 3%;

  }
}

.u_right {
  // background: url('../assets/images/u3.png') 0px 0px no-repeat;
  // background-size: cover;
  margin-left: 10px;
  width: 30%;
  float: left;
  background: #3447D4;
  height: 27vh;
  padding: 10px 0px 10px 0px;

  .u_title {
    font-size: calc(100vw * 16/ 1920);
    font-weight: bold;
    // color: #67DAEE;
    color: #fff;
  }

  .u_ulli {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 30px; // margin: 0;

    // padding: 0;
    li {
      list-style-image: url('../assets/images/u5.png');
      font-size: calc(100vw * 13/ 1920);
      font-weight: 400;
      color: #00EAFF;
      vertical-align: middle;
      margin-bottom: 5px;

      .u_text {
        color: #FFFFFF;

        span {
          font-size: calc(100vw * 19/ 1920);
        }
      }

    }

    li:last-child {
      list-style-image: url('../assets/images/u4.png');
    }
  }
}

.left_bz {
  width: 70%;
  float: right;
  background: #E9F3FB;
  border: 1px solid #AAEFFF;
  font-size: 20px;
  font-family: 'Microsoft YaHei';
  font-weight: bold;
  color: #0086FF;
  height: 27vh;
}

.bt_tit {
  font-size: 16px;
  font-family: 'Microsoft YaHei';
  font-weight: 400;
  color: #0086FF;
  margin: 10px;
}

.titbiaot {
  font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  color: #676a6c;
}

.right_zb {
  background: rgba($color: #FF5A00, $alpha: 0.1);
  border-radius: 37px;
  margin: 0 10px 0px 30px;
  padding: 10px 5px;

  .zb_text {
    text-align: center;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    margin: 10px 0px;
  }
}

.indexyichang {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  >div {
    padding: 6px 0px;
  }
}

.box-card_01 {
  height: 10em;
  // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  // padding: 20px;
  color: #fff;
  box-sizing: border-box;
}


.yncs ::v-deep.el-card__body {
  height: 80%;
}

.card_content_two {
  height: 24em !important;

  .hangnei_two {
    padding: 2.8em;
  }
}

.cStyle {
  color: #FF9600;
}

.rStyle {
  color: #dd2424;
}


.card_content {
  width: 100%;
  height: 18em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #0165c3;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;

  .hezi_red {
    width: 100%;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    font-weight: 900;
    background-color: #dd2424;
  }

  .hezi {
    width: 100%;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    font-weight: 900;
    color: #4fdec1;
    background-color: #0052A3;
  }

  .hangnei {
    padding: 17px;
  }


}

::v-deep .el-table {
  border-radius: 8px;
}

::v-deep .Outside {
  width: 100%;
  // height: 555px;
  position: relative;
}

.shuxian::v-deep.el-divider--vertical {
  height: 555px;
  position: absolute;
  left: 49.5%;
  z-index: 999;
}

.xiaofenge::v-deep.el-divider--vertical {
  height: 24em;
  float: left;
}

.home {
  padding: 20px;
  background-color: #fff;
  // min-height: calc(100vh - 124px);
  margin: 10px 20px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 18px;

  blockquote {
    padding: 0px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  // overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin: 0;
    font-size: 26px;
    line-height: 63px;
    font-weight: 100;
    display: inline;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

